<template>



  <div id="headerW" class="lucency">
    <div id="header">
      <a href="#" class="logo me-auto"><img src="../../../assets/711/711.svg" alt="" class="img-fluid">
        <span>柒壹壹</span>
      </a>
      <div class="nav">

        <div class="navbar">
          <div class="dlW">
            <div class="dl">
              <div class="dt"><a target="_self" href="/home">首页
                </a></div>


            </div>
            <div class="dl">
              <div class="dt"><a target="_self" href="/home">适用场景
                </a></div>


            </div>

            <div class="dl">
              <div class="dt"><a target="_self" href="/home">社区公告
                </a></div>


            </div>

            <div class="dl">
              <div class="dt"><a target="_self" href="/home">物业管理
                </a></div>


            </div>

            <div class="dl">
              <div class="dt"><a target="_self" href="/home">智能硬件
                </a></div>


            </div>

            <div class="dl">
              <div class="dt"><a target="_self" href="/home">联系我们
                </a></div>


            </div>
          </div>
        </div>
      </div>
      <div class="pox_ri">
        <div class="lang">
          <div class="tips"><em>简体</em></div>
          <div class="ul animated fadeIn" style="opacity: 1;"><a href="/home" class="on">简体</a> <a href="/big5/home"
              class="">繁體</a> <a href="/en/home" class="">EN</a></div>
        </div>
        <div class="h_setch"> </div>
        <div class="h_menu_btn"><span></span> <span></span>
          <span></span>
        </div>
      </div>

    </div>

  </div>







</template>

<script>
export default {

  data() {
    return {

    }
  },
  mounted() {
    let headerW = document.getElementById('headerW');
    headerW.addEventListener('mouseover', function () {
      headerW.classList.remove('lucency')
    })
  },
}
</script>
<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  display: block;
  color: inherit;
  text-decoration: none;
}


#headerW #header,
#headerW #hMenuBtnW {
  transition: all .4s;
  transform: translateY(0);
}

#header {
  width: 100%;
  min-width: 1280px;
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* z-index: 9999; */
  padding: 0 50px;
  background: #fff;
  height: 90px;
  font-family: "Microsoft YaHei", "微软雅黑", \5fae\8f6f\96c5\9ed1, arial, sans-serif, \5b8b\4f53;
}

#header .logo {
  top: 25px;
  position: absolute;
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  /* font-weight: 700; */
  letter-spacing: 1px;
  text-transform: uppercase;
}

#header .logo img {
  width: 36px;
}

@font-face {
  font-family: "字小魂印章体";
  src: url('../../../assets/font/字小魂印章体.ttf');

}

#header .logo span {
  color: #fff;
  font-family: "字小魂印章体";
  position: relative;
  top: -10px;
  left: 14px;

}

.about_mission.fixScrolScoll_0 #header {
  transform: translateY(0) !important;
}

#headerW.lucency #header {
  background: transparent;
  border-bottom: 2px solid hsla(0, 0%, 100%, .05);
  padding: 0 50px;
}

#header .nav {
  position: relative;
  padding-right: 126px;
  float: right;
}

#header .navbar {
  float: left;
  position: relative;
  height: 90px;
}

#header .navbar .dl {
  float: left;
  height: 100%;
  position: relative;
}

#header .navbar .dt {
  height: 100%;
  /* 底部线条样式 */
  /* border-bottom: 2px solid hsl(0, 0%, 100%); */

}

#headerW.lucency #header .navbar .dt a,
#headerW.lucency #header .pox_ri .lang .tips {
  color: hsla(0, 0%, 100%, .9);
}

#header .navbar .dt a {
  padding: 0 19px;
  line-height: 90px;
  color: #444;
  font-size: 14px;
  transition: all .3s;
  font-weight: 700;
}


#header .pox_ri {
  width: 127px;
  position: absolute;
  right: 0;
  top: 0;
  height: 90px;
}

#header .pox_ri .lang {
  float: left;
  height: 100%;
  position: relative;
}

#header .pox_ri .lang .tips {
  position: relative;
  height: 100%;
  padding: 0 6px 0 22px;
  color: #444;
  line-height: 90px;
  font-weight: 700;
  transition: all .3s;
}

i,
cite,
em,
var,
address,
dfn {
  font-style: normal;
}

#header .pox_ri .lang .tips:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -6px;
  width: 3px;
  height: 12px;
  background: #b2b2b2;
}

#header .pox_ri .lang .ul {
  display: none;
  width: 190px;
  height: 70px;
  background-color: #242424;
  position: absolute;
  right: -50px;
  top: 100%;
  text-align: center;
  font-size: 0;
  z-index: 10;
}

#header .pox_ri .lang .ul a {
  display: inline-block;
  font-size: 14px;
  margin: 0 15px;
  line-height: 1.3;
  padding-top: 26px;
  color: #fff;
  opacity: .6;
  transition: all .3s;
}

#header .pox_ri .lang .ul a.on,
#header .pox_ri .lang .ul a:hover {
  opacity: 1;
}

#header .pox_ri .h_menu_btn {
  float: left;
  height: 100%;
  width: 30px;
  display: flex;
  padding-top: 3px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 0 -7px 0 8px;
}

#header .pox_ri .h_menu_btn span {
  width: 15px;
  height: 3px;
  margin: 0 0 3px;
  background: #444;
  transition: all .4s;
}
</style>